<template>
  <div>
    <van-swipe :autoplay="3000" lazy-render width="100%" height="100%">
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" alt="hh" style="width: 100%;height: 100%" @click="goToDetailPage()"/>
      </van-swipe-item>
    </van-swipe>
    <div v-for="item in data">
      <van-card
          :num="'商品数量:'+item.size"
          :desc="'所处地区'+item.area"
          :thumb=item.image
          @click="goToDetail()"
      >
        <template #tags>
          <van-tag plain type="primary">商品类型</van-tag>
          <van-tag plain type="primary">{{ item.type }}</van-tag>
          <br/>
          <van-tag plain type="primary">是否滞销</van-tag>
          <van-tag plain type="primary">{{ item.isUnsalable === 1 ? '是' : "不是" }}</van-tag>
        </template>
        <template #footer>
          <van-button size="mini">联系我们</van-button>
          <van-button size="mini">{{ item.phone }}</van-button>
        </template>
      </van-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import {useRouter} from "vue-router";
import {ref, watchEffect} from "vue";
import myAxios from "../plugins/myAxios";

const router = useRouter()
const images = [
  'https://img01-xusong.91q.com/D0DB28E8-50D2-4CD7-AC85-8C9B5035A6AF.jpg',
];
let baseUrl = 'http://localhost:8080/jeecg-boot/'
let data = ref([])
const loadData = async () => {
  //采用ref进行存储的时候 .value才会触发我们的值
  data.value = await myAxios({
    url: '/farmer/selectAll',
    method: 'get',
  }).then((res) => {
    console.log(res.data)
    for (let i = 0; i < res.data.length; i++) {
      res.data[i].image = baseUrl + res.data[i].image
    }
    return res.data
  })
}
watchEffect(() => {
  loadData();
})
// const goToDetail = () => {
//   console.log('去详情页了')
//   router.push({
//     path: '/details'
//   })
// }
const goToDetailPage = () => {
  router.push({
    path: '/details'
  })
}
</script>
<style scoped>
</style>